<script>
import { getPermissionListAPI } from '@/api/permissionApi'
import { transToTreeData } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      /* 权限点列表 */
      permissionList: []
    }
  },
  methods: {
    /* 获取权限点列表的接口 */
    async fetchPermission() {
      try {
        const { data } = await getPermissionListAPI()
        this.permissionList = transToTreeData(data, 0)
      } catch (e) {
        this.$message.error(e.message)
      }
    }
  },
  mounted() {
    this.fetchPermission()
  }
}
</script>

<template>
  <div class="permission">
    <el-card>
      <el-button type="primary" icon="el-icon-plus">添加权限</el-button>
      <el-table border stripe :data="permissionList" row-key="id">
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="标识" align="center" prop="code"></el-table-column>
        <el-table-column label="描述" align="center" prop="description"></el-table-column>
        <el-table-column label="开启状态" align="center" width="100">
          <template #default="{row}">
            <el-switch v-model="row.enVisible" active-value="1" inactive-value="0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="权限级别" align="center">
          <template #default="{row}">
            <el-link type="primary" :underline="false">{{ row.type === 1 ? '页面权限' : '按钮权限' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="primary" icon="el-icon-plus" v-if="row.type===1">添加权限</el-button>
            <el-button type="warning" icon="el-icon-edit">编辑权限</el-button>
            <el-button type="danger" icon="el-icon-delete">删除权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.permission {
  .el-card {
    margin-top: 10px;
  }

  .el-table {
    margin: 10px 0;
  }
}
</style>
